<template>
  <div class="body">
    <div class="one">
      <div class="left">The Postal Store<sup>®</sup></div>
      <div class="right">
        <el-input placeholder="Search the Store: Keyword or SKU"></el-input>
        <div class="button">
          <iconSeacheTwo style="width: 70%;height: 70%;"></iconSeacheTwo>
        </div>
      </div>
    </div>
    <div class="two">
      <div class="menu" >
        <div class="box">
          <div class="img"><img src="../../assets/icon/ps-subicon-stamps.png"></div>
          <div class="text">Stamps</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu" >
        <div class="box">
          <div class="img"><img src="../../assets/icon/ps-subicon-supplies.png"></div>
          <div class="text">Supplies</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu" >
        <div class="box">
          <div class="img"><img src="../../assets/icon/ps-subicon-cards.png"></div>
          <div class="text">Cards & Envelopes</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu" >
        <div class="box">
          <div class="img"><img src="../../assets/icon/ps-subicon-collectors.png"></div>
          <div class="text">Collectors</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu" >
        <div class="box">
          <div class="img"><img src="../../assets/icon/ps-subicon-gifts.png"></div>
          <div class="text">Gifts</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu" >
        <div class="box">
          <div class="img"><img src="../../assets/icon/ps-subicon-business.png"></div>
          <div class="text">Business Supplies</div>
          <div class="mo"></div>
        </div>
      </div>
      <div class="menu" style="border: 0;">
        <div class="box">
          <div class="img"><img src="../../assets/icon/ps-subicon-saved.png"></div>
          <div class="text">Saved</div>
          <div class="mo"></div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="img"><img src="../../assets/image/sept24-home-m.jpg"></div>
      <div class="bottom">
        <div class="title">Autumn Colors</div>
        <div class="text">Celebrate the beauty of fall with the issuance of the Autumn Colors Forever® stamps.</div>
        <el-button>Shop Now</el-button>
      </div>
    </div>
    <div class="four">
      <div class="left">
        <div class="title">Stamps</div>
        <div class="text">We have the postage you need for domestic and international mail.</div>
        <el-button>Shop All Stamps</el-button>
      </div>
      <div class="right">
        <div class="box">
          <div class="img"><img src="../../assets/image/684904-H0.jpg"></div>
          <div class="name">U.S.Flags 2024</div>
          <div class="type">Stamps</div>
          <div class="mo"></div>
        </div>
        <div class="money">$14.60 - $7,300.00</div>
      </div>
      <div class="right">
        <div class="box">
          <div class="img"><img src="../../assets/image/485504-H0.jpg"></div>
          <div class="name">U.S.Flags 2024</div>
          <div class="type">Stamps</div>
          <div class="mo"></div>
        </div>
        <div class="money">$14.60 - $7,300.00</div>
      </div>
      <div class="right">
        <div class="box">
          <div class="img"><img src="../../assets/image/485404-H0.jpg"></div>
          <div class="name">U.S.Flags 2024</div>
          <div class="type">Stamps</div>
          <div class="mo"></div>
        </div>
        <div class="money">$14.60 - $7,300.00</div>
      </div>
      <div class="right">
        <div class="box">
          <div class="img"><img src="../../assets/image/485704-H0.jpg"></div>
          <div class="name">U.S.Flags 2024</div>
          <div class="type">Stamps</div>
          <div class="mo"></div>
        </div>
        <div class="money">$14.60 - $7,300.00</div>
      </div>
      <div class="right">
        <div class="box">
          <div class="img"><img src="../../assets/image/585804-H0.jpg"></div>
          <div class="name">U.S.Flags 2024</div>
          <div class="type">Stamps</div>
          <div class="mo"></div>
        </div>
        <div class="money">$14.60 - $7,300.00</div>
      </div>
    </div>
    <div class="five">
      <div class="one">
        <div class="left1">
          <div class="img"><img src="../../assets/image/PS-HP-Ship-Free.png"></div>
          <div class="box">
            <div class="title">Free<br>Shipping Supplies</div>
            <div class="text">Order free supplies like flat rate boxes and envelopes for Priority Mail® and Priority Mail Express® shipping.</div>
            <el-button>Get Free Supplies</el-button>
          </div>
        </div>
        <div class="right1">
        <div class="img"><img src="../../assets/image/sustainable-blade-homepage.png"></div>
        <div class="box">
          <div class="title">Sustainable Products for<br>
            a Greener Tomorrow</div>
          <div class="text">USPS Priority Mail<sup>®</sup> and Priority Mail Express<sup>®</sup> paper and cardboard packaging is made from recycled content and is recyclable.</div>
          <el-button>Shop Sustainable</el-button>
        </div>
        </div>
        <div class="xie"></div>
      </div>
      <div class="two1">
        <div class="left">
          <div class="title">USPS for Business</div>
          <div class="text">We have shipping solutions designed to help you grow your business.</div>
          <el-button>Shop Business</el-button>
        </div>
        <div class="right"><img src="../../assets/image/aug24-blade-d.jpg"></div>
        <div class="xie"></div>
      </div>
    </div>
    <div class="six">
      <div class="one1">
        <div class="left">For Collectors</div>
        <div class="right">
          <div class="box"><a href="#">Download Catalog</a></div>
          <div class="box"><a href="#">Catalog Quick Order</a></div>
          <div class="box"><a href="#">Philatelic Catalog Order Form</a></div>
        </div>
      </div>
      <div class="two1">
        <div class="left">Gift Cards</div>
        <div class="right">
          <div class="box"><a href="#">Shop Now</a></div>
        </div>
      </div>
    </div>
  </div>
  <!-- <feet></feet> -->
</template>
<script setup>
import iconSeacheTwo from '../../assets/icon/seachr-two.vue'
import feet from '../modules/feet.vue'
</script>
<style scoped>
.icon{
  width: 100%;
  height: 100%;
}
img{
  width: 100%;
  height: 100%;
}
  .body{
    width: 1230px;
    /* height: 888px; */
    margin: 0 auto;
    padding:0 10px;
    /* margin: 0 10px; */
    overflow-wrap: break-word;
    /* background-color: yellowgreen; */
    .one{
      width: 100%;
      height: 50px;
      margin-top: 20px;
      /* background-color: aqua; */
      overflow: hidden;
      .left{
        width: 300px;
        height: 100%;
        float: left;
        margin-left: 10px;
        margin-top: 4px;
        color: #333366;
        font-size: 26px;
        font-weight:500;
        /* background-color: antiquewhite; */
      }
      .right{
        width: 300px;
        height: 43px;
        float: right;
        margin-right: 20px;
        border: 1.4px solid #333366;
        border-radius: 6px;
        /* background-color: antiquewhite; */
        .el-input{
          width: 250px;
          height: 100%;
          /* border: 0; */
        }
        :deep(.el-input__wrapper){
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            box-shadow:0;
            /* background-color: #333366; */
          }
        .button{
          width: 50px;
          height: 100%;
          border-radius: 4px;
          background-color: #333366;
          float: right;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .button:hover{
          background-color: #434381;
        }
      }
    }
    .two{
      width: 100%;
      height: 100px;
      margin-top: 40px;
      background-color: rgb(255, 255, 255);
      transform: skew(-12deg);
      display: flex;
      justify-content: center;
      /* align-items: center; */
      .menu{
        height: 55%;
        width: 13.5%;
        /* background-color: #2626bd; */
        border-right: 2px solid #a1a1a1;
        /* display: flex;
        justify-content: center; */
        /* margin: 0 auto; */
        .box{
          width: 47%;
          overflow-wrap: break-word;
          /* background-color: aqua; */
          cursor: pointer;
          margin: 0 auto;
          /* position: absolute; */
          /* z-index: 1; */
          transform: skew(12deg);
          .img{
            width: 40px;
            height: 35px;
            margin: 0 auto;
            /* background-color: rgb(255, 255, 255); */
          }
          .text{
            color: #333366;
            text-align: center;
            font-size: 15px;
            margin-top: 7px;
            width: 100%;
            overflow-wrap: break-word;
            /* background-color: violet; */
          }   
          .mo{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 22;
            top:0;
          }
          .mo:hover{
            background-color: rgba(255, 255, 255, 0.308);
          }
        }
      }
    }
    .three{
      width: 100%;
      height: 530px;
      /* background-color: red; */
      .img{
        width: 100%;
        height: 335px;
        /* background-color: #333366; */
      }
      .bottom{
        width: 550px;
        height: 195px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #333366;
        /* background-color: yellow; */
        /* border: #333366; */
        .title{
          width: 100%;
          height: 30px;
          font-size: 25px;
          font-weight: 500;
          /* background-color: violet; */
          margin-top: 45px;
          text-align: center;
        }
        .text{
          width: 100%;
          height: 20px;
          font-size: small;
          text-align: center;
          margin-top: 10px;
          /* background-color: aliceblue; */
        }
        .el-button{
          width: 200px;
          height: 46.5px;
          font-size: 16px;
          margin-top: 34px;
          color: #ffffff;
          border: 0;
          background-color: #333366;
        }
      }
    }
    .four{
      width: 100%;
      /* height: 320px; */
      overflow-wrap: break-word;
      margin-top: 60px;
      /* background-color: rgba(255, 255, 0, 0.596); */
      display: flex;
      flex-direction: row;
      .left{
        width: 25%;
        height: 100%;
        float: left;
        /* background-color: #7b7b83; */
        .title{
          width: 100px;
          height: 40px;
          font-size: 21px;
          font-weight: 600;
          margin-top: 15px;
          color: #333366;
          /* background-color: yellow; */
        }
        .text{
          width: 80%;
          overflow-wrap: break-word;
          margin-top: 45px;
          /* background-color: #ffffff; */
        }
        .el-button{
          background-color: #333366;
          border: 0;
          width: 170px;
          height: 45px;
          margin-top: 28px;
          font-size: 15px;
          color: #ffffff;
          margin-bottom: 60px;
        }
        .el-button:hover{
          background-color: rgb(195, 196, 197);
          color: #333366;
        }
      }
      .right{
        width: 15%;
        overflow-wrap: break-word;
        float: left;
        /* background-color: rgb(50, 130, 205); */
        .box{
          width: 80%;
          overflow-wrap: break-word;
          margin: 0 auto;
          position: relative;
          font-size: 15px;
          color: #333366;
          /* background-color: rgba(196, 132, 14); */
          .img{
          width: 120px;
          height: 130px;
          /* background-color: #333366; */
          margin: 0 auto;
          }
          .name{
            width: 100%;
            /* height: 15px; */
            overflow-wrap: break-word;
            /* background-color: rgb(255, 145, 0); */
            /* margin-left: 10px; */
            margin-top: 55px;
          }
          .type{
            width: 100%;
            /* height: 15px; */
            overflow-wrap: break-word;
            /* background-color: white; */
          }
          .mo{
            width: 100%;
            height: 100%;
            position: absolute;
            /* background-color: #42884b69; */
            z-index: 22;
            top:0%;
          }
          .mo:hover{
            background-color: #ffffff65;
          }
        }
        .money{
          width: 80%;
          margin: 0 auto;
          font-size: 17px;
          overflow-wrap: break-word;
          /* background-color: yellowgreen; */
        }
      }
    }
    .five{
      .one{
        width: 100%;
        height: 326px;
        /* background-color: #74b808; */
        position: relative;
        display: flex;
        .left1{
          width: 50%;
          height: 100%;
          background-color: #f7f7f7;
          display: flex;
          padding-top: 20px;
          overflow: hidden;
          .img{
            width: 43%;
            height: 60%;
            float: left;
            cursor: pointer;
            /* background-color: #333366; */
          }
          .box{
            width: 50%;
            height: 100%;
            /* background-color: saddlebrown; */
            padding-left: 6px;
          .title{
            width: 80%;
            overflow-wrap: break-word;
            font-size: 23px;
            /* background-color: #74b808; */
            color: #333366;
          }
          .text{
            width: 100%;
            /* height: ; */
            margin-top: 25px;
            overflow-wrap: break-word;
            /* background-color: #a1a1a1; */
          }
          .el-button{
            width: 190px;
            height: 45px;
            background-color: #333366;
            color: #ffffff;
            margin-top: 15px;
            font-size: 15px;
            border: 0;
          }
          .el-button:hover{
            background-color: #dfdfdf;
            color: #333366;
            border: 1px solid black;
          }
          }
        }
        .right1{
          width: 50%;
          height: 100%;
          background-color: #d6ebcc;
          display: flex;
          .img{
            width: 50%;
            height: 100%;
            /* background-color: #d7d7da; */
            margin-top: 40px;
            cursor: pointer;
          }
          .box{
            width: 50%;
            height: 100%;
            /* background-color: #336637; */
            margin-top: 20px;
            .title{
            width: 90%;
            overflow-wrap: break-word;
            font-size: 23px;
            /* background-color: #74b808; */
            color: #333366;
            }
            .text{
            width: 100%;
            /* height: ; */
            margin-top: 15px;
            overflow-wrap: break-word;
            /* background-color: #a1a1a1; */
            }
            .el-button{
              width: 190px;
              height: 45px;
              background-color: #333366;
              color: #ffffff;
              margin-top: 22px;
              font-size: 15px;
              border: 0;
            }          
            .el-button:hover{
              background-color: #dfdfdf;
              color: #333366;
              border: 1px solid black;
            }
          }
        }
        .xie{
          width: 50px;
          height: 100%;
          transform: skew(-8deg);
          background-color: rgb(255, 255, 255);
          right:48%;
          position: absolute;
        }
      }
      .two1{
        width: 100%;
        height: 270px;
        background-color: #f7f7f7;
        margin-top: 50px;
        display: flex;
        position: relative;
        overflow: hidden;
        .left{
          width: 35%;
          height: 100%;
          /* background-color: #3d8847; */
          padding-top: 20px;
          padding-left: 50px;
          .title{
            width: 80%;
            overflow-wrap: break-word;
            font-size: 23px;
            /* background-color: #74b808; */
            color: #333366;
          }
          .text{
            width: 80%;
            /* height: ; */
            margin-top: 25px;
            overflow-wrap: break-word;
            /* background-color: #a1a1a1; */
          }
          .el-button{
            width: 190px;
            height: 45px;
            background-color: #333366;
            color: #ffffff;
            margin-top: 15px;
            font-size: 15px;
            border: 0;
          }
          .el-button:hover{
            background-color: #dfdfdf;
            color: #333366;
            border: 1px solid black;
          }
        }
        .right{
          width: 65%;
          background-color: #333366;
        }
        .xie{
          width: 50px;
          height: 100%;
          transform: skew(-8deg);
          background-color: rgb(255, 255, 255);
          right:59.5%;
          position: absolute;
        }
      }
    }
    .six{
      width: 100%;
      /* height: 400px; */
      margin-top: 50px;
      margin-bottom: 20px;
      overflow-wrap: break-word;
      /* background-color: yellowgreen; */
      .one1{
        width: 100%;
        min-height: 50px;
        overflow-wrap: break-word;
        /* background-color: #7373d3; */
        display: flex;
        .left{
          width: 30%;
          height: 100%;
          font-size: 25px;
          color: #333366;
          /* background-color: yellowgreen; */
        }
        .right{
          width: 80%;
          height: 100%;
          /* background-color: yellow; */
          display: flex;
          .box{
            margin-right: 80px;
            font-size: 18px;
            overflow-wrap: break-word;
            a{
            color: #285c86;
            }
            /* background-color: antiquewhite; */
          }
        }
      }
      .two1{
        width: 100%;
        height: 50px;
        /* background-color: aqua; */
        display: flex;
        .left{
          width: 30%;
          height: 100%;
          font-size: 25px;
          color: #333366;
          /* background-color: yellowgreen; */
        }
        .right{
          width: 80%;
          height: 100%;
          /* background-color: yellow; */
          display: flex;
          .box{
            margin-right: 80px;
            font-size: 18px;
            overflow-wrap: break-word;
            a{
              color: #285c86;
            }
            /* background-color: antiquewhite; */
          }
        }
      }
    }
  }
</style>